<template>
  <div style="height: 100%">
    <el-table
      :data="tableData"
      style="width: 100%; height: 500px"
      ref="tableRef"
      @row-click="handleRowClick"
      highlight-current-row
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="Date" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="name" label="Name" width="120" />
      <el-table-column property="address" label="use show-overflow-tooltip" width="240" show-overflow-tooltip />
      <el-table-column property="address" label="address" />
    </el-table>

    <el-button :disabled="buttonFlag" type="primary" style="margin-top: 50px; clear: both">delete</el-button>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { ElTable } from "element-plus";
const multipleSelection = ref([]);
const tableRef = ref();
const tableData = [
  {
    date: "2016-05-04",
    id: 1,
    name: "A",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland"
  },
  {
    date: "2016-05-03",
    name: "A",
    id: 2,
    address: "760 A Street, South Frankfield, Illinois"
  },
  {
    date: "2016-05-02",
    name: "B",
    id: 3,
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen"
  },
  {
    date: "2016-05-01",
    name: "B",
    id: 4,
    address: "23618 Windsor Drive, West Ricardoview, Idaho"
  }
];
// 第一种
// const buttonFlag = computed(()=>{
//     return tableRef.value && tableRef.value.getSelectionRows().some(x=>x.name==='B')
// })
// const handleRowClick = (row,column)=>{
//     console.log(row)
//     const isSelected = tableRef.value.getSelectionRows().includes(row);
//     tableRef.value.toggleRowSelection(row, !isSelected);
// }

// 第二种
const buttonFlag = ref(true);
watch(
  () => multipleSelection.value,
  (newV, oldV) => {
    buttonFlag.value = newV.some(x => x.name === "B") || newV.length === 0;
  },
  { deep: true, immediate: true }
);
const handleRowClick = (row, column) => {
  const isSelected = tableRef.value.getSelectionRows().includes(row);
  tableRef.value.toggleRowSelection(row, !isSelected);
  // 判断是否重复
  const isRepeat = multipleSelection.value.some(x => x.id === row.id);
  console.log("是否重复", isRepeat);
  if (isRepeat) {
    debugger;
    multipleSelection.value = multipleSelection.value.filter(x => x.id != row.id);
    return false;
  }
  multipleSelection.value.push(row);
};
</script>
